<!--在线咨询评分弹窗-->
<template>
  <!--<div v-show="webchatDialogShow">-->
  <div class="webchat-grade" :class="webchatDialogShow ? 'layout-qua' : 'layin-qua'">
    <div class="web-grade-left">
      <h2>{{$t('intelligentQualityCheck.intelWebchatDetail')}}</h2>
      <div class="web-grade-left-con">
        <affix :label="$t('webchat.basicInfo')">
          <div class="call-detail">
            <WebChatBaseInfoDetails :info="currentItem" :isIntelligent="true" :scoreStatus="isHandStatus" :resultGrade="resultGrade" :inputFlag="inputFlag"></WebChatBaseInfoDetails>
          </div>
        </affix>
        <affix :label="$t('intelligentQualityCheck.intelDetail')" class="call-detail"></affix>
        <div v-if="currentItem.type === 'auto'">
          <div class="rules-wrap">
            <span :class="{'active' : index === rulesIndex}" v-for="(item,index) in redRuleResults" :key="index" @click="markRed(item.ruleId, index)">{{item.name}}</span>
          </div>
          <webChatView ref="webChatView" :firstRuleId="redRuleResults.length > 0 ? redRuleResults[0].ruleId : '000'" :chatInformationId ="this.currentItem._id" :qualityCheck="true" :historyList="currentItem.dialogues" :ruleResults='currentItem.ruleResults'></webChatView>
          <div class="channelHit">
            <!--<p style="color:#878787;padding: 10px 0px">{{$t('intelligentQualityCheck.intelDetailRule')}}</p>-->
            <!--@selection-change="handleSelectionChange"-->
            <!--被命中项 可选择不计分-->
            <el-table :data="ruleResults" ref="multipleTable" :row-class-name="getRowClass" @expand-change='expandChange' id="textColor">
              <!--<el-table-column-->
                <!--type="selection"-->
                <!--width="55">-->
              <!--</el-table-column>-->
              <el-table-column
                v-for="(item, index) in options"
                :key="index"
                :prop="item.name"
                :label="item.displayname">
                      <template slot-scope="scope" >
                        <div v-if="item.name=='webChatRuleDetail'&&scope.row.webChatRuleDetail&&scope.row.webChatRuleDetail.length>0">
                          <el-tooltip popper-class='table-tooltip' placement="top">
                            <div slot="content" v-html="scope.row.webChatRuleDetail[0].type+'-'+scope.row.webChatRuleDetail[0].text"></div>
                              <p v-html="scope.row.webChatRuleDetail[0].type+'-'+scope.row.webChatRuleDetail[0].text"></p>
                          </el-tooltip>
                        </div>
                      <div v-else-if="item.name=='webChatRuleDetail'&&(scope.row.webChatRuleDetail&&scope.row.webChatRuleDetail.length==0)"><p>{{$t('public.none')}}</p></div>
                      <el-tooltip v-else popper-class='table-tooltip' :content="JSON.stringify(scope.row[item.name])" placement="top">
                        <div>
                            <span>{{scope.row[item.name]}}</span>
                        </div>
                      </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <div v-if="props.row.webChatRuleDetail&&props.row.webChatRuleDetail.length>0" id="redFont">
                      <p v-for="(i,idx) of props.row.webChatRuleDetail" :key="idx" v-html="i.type+'-'+ i.text"></p>
                    </div>
                  </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!--<div class="channelHit">-->
          <!--<el-popover-->
            <!--placement="top"-->
            <!--width="320"-->
            <!--v-model="popoverIsShow">-->
            <!--<div v-show="surePopover">-->
              <!--<p style="font-size: 12px;margin-bottom: 10px">您可以根据命中规则，选择具体需要取消的命中内容，取消命中后，将同步取消关联计分，从而影响评分结果，请谨慎选择。</p>-->
              <!--<ul>-->
                <!--<li v-for="(item, index) in multipleSelection">-->
                  <!--<span>{{item.name}}</span>-->
                  <!--&lt;!&ndash;<ul v-for="(item, index) in currentItem.ruleResults.hitCount">&ndash;&gt;-->
                    <!--&lt;!&ndash;<li><el-checkbox v-model="checked">第1次命中</el-checkbox></li>&ndash;&gt;-->
                  <!--&lt;!&ndash;</ul>&ndash;&gt;-->
                <!--</li>-->
              <!--</ul>-->
              <!--<div style="text-align: right; margin: 5px">-->
                <!--<el-button size="mini" type="text" @click="popoverIsShow = false">取消</el-button>-->
                <!--<el-button type="primary" size="mini" @click="sureGiveUpResult">确定</el-button>-->
              <!--</div>-->
            <!--</div>-->
            <!--<el-button slot="reference" class="primary_btn deploy-btn" @click="channelHit">取消命中</el-button>-->
          <!--</el-popover>-->
        <!--</div>-->
        <webChatHistoryView :showFirstWord="true" :chatInformationId ="currentItem._id" :qualityCheck="true"  v-if="currentItem.type !== 'auto' && currentItem._id"></webChatHistoryView>
        <affix :label="$t('business.businessInfo')" style="margin-top: 30px">
          <div  class="business">
            <div v-if="businessShow.length ===0" >{{$t('qualityCheck.noBusinessInfo')}}</div>
            <div class="history-content" v-for="(item, index) in businessShow" :key="index">
              <div class="data">
                <div style="float: left;">{{item.createUser}}<span class="pad-left">{{$t('business.createBusiness')}}</span></div>
                <div style="float: right;"><span class="pad-right">{{$t('public.callStatus')}}</span>{{item.step}}</div>
              </div>
              <div class="clear"></div>
              <div v-for="(one, index) in item.data" :key="index" class="bus-info div-color">
                <div v-if="one.name === $t('business.businessNumber')">
                  <span>{{one.name + $t('public.colon')}}</span><span>{{one.value}}</span>
                  <span @click="busShowDetail(item._id)" style="float: right;" class="span-color"><i class="icon iconfont font12 pad-right" :class="busDetailShow? 'icon-shouqi':'icon-zhankai1'"></i>{{busDetailShow?$t('qualityCheck.businessUp'):$t('qualityCheck.businessDown')}}</span>
                </div>
                <div v-else>
                  <span>{{one.name + $t('public.colon')}}</span>
                  <span class="break-all" v-if="typeof one.value === 'object'">
              <div v-for="(item1, index) in one.value" :key="index">
                <globalPopup :url="item1.url" :key="item1.url2"
                             @showBigImage="showBigImage"
                             :name="item1.name" :currObj="item1" :srcUrl="item1.url2" :imgObj="item.data"></globalPopup>
              </div>
        </span>
                  <span class="break-all" v-else v-html="one.value"></span>
                </div>
              </div>
              <business class="business-dialog bus-info" :busId="busId" :showHistory="true" v-if="busDetailShow"  @event="businessEvent"></business>
            </div>
          </div>
        </affix>
      </div>
    </div>
    <div class="web-grade-right">
      <h2>{{$t('qualityCheck.grade2')}}
        <div v-show="webchatDialogShow" class="close" @click="closeWindow"><i class="el-icon-close"></i></div>
      </h2>
      <div class="web-grade-right-con">
        <div v-show="currentItem.type === 'auto'">
          <div class="supplemental">
            <h3>{{$t('intelligentQualityCheck.intelSupplemental')}}</h3>
            <el-input v-model="supplementalInputValue" :disabled="checkBoxIsTrue" @change="inputChangeFun" class="right-input" style="margin: 10px 5px 5px 0PX"></el-input>
            <span>{{$t('public.minutes')}}</span>
            <p class="right-content">{{$t('intelligentQualityCheck.intelSuppelMentalExplain')}}</p>
            <h3 style="margin-top: 10px">{{$t('qualityCheck.commentCont')}}</h3>
            <textarea class="right-text" :placeholder="currentItem.comment" v-model="comment"></textarea>
          </div>
          <!--<div class="hand">-->
            <!--<h3>{{$t('intelligentQualityCheck.intelHandScore')}}</h3>-->
            <!--<el-checkbox v-model="checkBoxIsTrue" @change="checkBoxFun" class="checkBox">{{$t('intelligentQualityCheck.intelIsAccuracy')}}</el-checkbox>-->
            <!--<div v-show="checkBoxIsTrue" style="margin: 5px 5px 5px 0px;">-->
              <!--<el-input v-model="handInputValue" @change="handiInputChangeFun" class="right-input"></el-input>-->
              <!--<span>{{$t('public.minutes')}}</span>-->
            <!--</div>-->
            <!--<p class="right-content">{{$t('intelligentQualityCheck.intelHandScoreAfter')}}</p>-->
          <!--</div>-->
        </div>
        <div v-show="currentItem.type === 'manual'">
          <div class="wrap_grade">
            <el-popover
              ref="popover4"
              placement="top"
              width="400"
              trigger="hover">
              <quality-assist :ruleRender="ruleRender"></quality-assist>
            </el-popover>
            <span v-popover:popover4 class="assist">{{$t('intelligentQualityCheck.intelQualiAssist')}}</span>
          </div>
          <el-row :gutter="10">
            <el-col :span="6" class="grade_ipt">
              <span class="qc_score">{{$t('intelligentQualityCheck.intelGradeNum')}}:</span>
            </el-col>
            <el-col :span="18">
              <el-input v-model.trim="handInputValue"  @change="handiInputChangeFun"></el-input>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6" class="grade_are">
              <span>{{$t('intelligentQualityCheck.intelGradeDetail')}}:</span>
            </el-col>
            <el-col :span="18">
              <textarea v-model="comment" :placeholder="currentItem.comment" class="right-text" style="width: 256px"></textarea>
            </el-col>
          </el-row>
        </div>
        <div style="text-align: right;margin-top: 50px">
          <el-button size="mini" @click="rejectFun" v-if="appealFlag">{{$t('intelligentQualityCheck.intelReject')}}</el-button>
          <el-button size="mini" @click="giveUpResult" v-else>{{$t('intelligentQualityCheck.intelGiveUpResult')}}</el-button>
          <el-button size="mini" @click="channelFun">{{$t('public.cancel')}}</el-button>
          <el-button size="mini" type="primary" @click="checkResultFun" v-if="appealFlag">{{$t('intelligentQualityCheck.intelRegrade')}}</el-button>
          <el-button size="mini" type="primary" @click="checkResultFun" v-else>{{$t('public.confirm')}}</el-button>
        </div>
      </div>
    </div>
    <div v-show="webchatDialogShow" class="mask-qua"></div>
  </div>
  <!--</div>-->
</template>
<script>
  // import {getQualityCheckConfigs} from '@/utils/webchat.js'
  import globalPopup from '@/components/ui-modules/affix/globalPopup.vue'
  import affix from '../../../ui-modules/affix/Affix.vue'
  import {deepClone, getCache} from '@/utils/m7Utils.js'
  import {commitImg} from '@/utils/publicMethod.js'
  import {getBusinessHistoryDataNew} from '@/utils/workflowUtils.js'
  import qualityAssist from '../qualityCheck/qualityAssist.vue'
  import gradeTemp from '../../qualityCheck/base/gradeTemp'
  import webChatView from './qualityCheckWebChatView'
  import webChatHistoryView from '../../webchat/webChatView'
  import business from '@/components/public-modules/cust-tab-content/business/index.vue'
  import WebChatBaseInfoDetails from '@/components/public-modules/webChatBaseInfoDetails/webchatBaseInfoDetail.vue'
  import bus from '@/store/eventBus'
  export default {
    name: 'qualityCheckResultWebChatDetails',
    data () {
      return {
        gradeObj: {
          grade: 0,
          COMMENT: '',
          obj: {}
        },
        COMMENT: '',
        configList: [],
        simpleForm: {},
        configListForm: {},
        multipleSelection: [],
        checked: true,
        ruleRender: [],
        popoverIsShow: false,
        surePopover: false,
        options: [
          {displayname: this.$t('intelligentQualityCheck.intelMatchRule'), name: 'name'},
          {displayname: this.$t('intelligentQualityCheck.intelCorrelation'), name: 'scoreItem'},
          {displayname: this.$t('intelligentQualityCheck.intelHitDetails'), name: 'hitCount'},
          {displayname: this.$t('intelligentQualityCheck.intelHitMsg'), name: 'webChatRuleDetail'},
        ],
        supplementalInputValue: '', // 补充得分值
        handInputValue: '', // 手动评分值
        isHandStatus: false, // 当前评分状态
        comment: '',
        resultGrade: 0,
        busDetailShow: false,
        busId: '',
        inputFlag: false,
        currentItem: {},  //  当前展示项数据详情
        checkBoxIsTrue: false, // 是否手动评分
        rulesIndex: 0, // 被点中规则index
        ruleResults:[]
      }
    },
    props: {
      // checkBoxIsTrue: { // 是否手动评分
      //   type: Boolean,
      //   default: function () {
      //     return false
      //   }
      // },
      currentItemSny: Object,  // 传进来的  解决异步问题 当前展示项数据详情
      template: Object,
      currentGrade: Object,
      webchatDialogShow: {type: Boolean, default: false},
      reGrade: {type: Boolean, default: false},
      appealFlag: {type: Boolean, default: false}
      // ruleRender: {type: Array, default: []}
    },
    components: {
      gradeTemp,
      webChatView,
      affix,
      business,
      globalPopup,
      WebChatBaseInfoDetails,
      webChatHistoryView,
      qualityAssist
    },
    computed: {
      saveBtnDescribe () {
        return this.reGrade ? this.$t('public.save') : this.$t('qualityCheck.saveAndNext')
      },
      passBtn () {
        return !this.reGrade
      },
      businessShow () {
        let data = this.currentItem && this.currentItem.busHistory || []
        let arr = []
        for (let i = 0; i < data.length; i++) {
          let busObj = {_id: data[i]._id}
          let item = data[i]
          busObj.lastUpdateUser = getCache('agents', item.lastUpdateUser).displayName
          busObj.createUser = getCache('agents', item.createUser).displayName
          busObj.step = getCache('businessFlowStep', item.step).name
          busObj.flow = getCache('businessFlow', item.flow).name
          busObj.data = getBusinessHistoryDataNew({excuteData: item.historyData, action: 'create'}, item)
          arr.push(busObj)
        }
        return arr
      },
      redRuleResults () {
        return this.currentItem.ruleResults.filter(function (item) {
          return item.redFlag
        })
      }
    },
    watch: {
      currentItemSny: {
        deep: true,
        handler (nv, ov) {
          this.currentItem = this.currentItemSny
          this.rulesIndex = 0   //  初始化时候 标红第一个规则
          if (this.currentItem.type === 'auto') {
            this.ruleChecked()
          } else {
            this.resultGrade = this.currentItem.gradeAmount
            let data = {
              page: 1,
              pageSize: 200
            }
            this.$store.dispatch('getMarkRuleListConfig', data).then(res => {
              if (res.success) {
                res.data = res.data.filter((item) => {
                  return item.type === 'webchat' && item.isEnable
                })
                this.ruleRender = deepClone(res.data)
              }
            })
          }
        }
      }
    },
    methods: {
      getRowClass (row) {
        if (!row.row.webChatRuleDetail||row.row.webChatRuleDetail.length==0) {
          return 'row-expand-cover'
        }
      },
      expandChange(row){
        this.$nextTick(()=>{
          let redFont = document.getElementById('redFont')
          if(redFont){
            let span = redFont.getElementsByTagName('span')
            if(this.redRuleResults.length>0){
              for (let n=0;n < span.length;n++) {
                redFont.getElementsByTagName('span')[n].style.color = '#000'
              }
              let redFontItem = redFont.getElementsByClassName(row.ruleId)
              console.log(redFontItem,'redFontItem')
              for (let i=0;i < redFontItem.length;i++) {
                redFont.getElementsByClassName(row.ruleId)[i].style.color = 'red'
                }
            }
          }
        })
      },
      // 查看大图
      showBigImage (item, obj) {
        commitImg(item, obj)
      },
      giveUpResult () {
        let data = {
          ids: [this.currentItem._id]
        }
        this.$store.dispatch('giveUpQualityCheckesRultAllWeb', data).then(res => {
          this.$emit('giveUpResult', res)
        })
      },
      businessEvent (eventData) {
        let data = eventData.data
        this.busId = data._id
        if (eventData.event !== 'changeBusinessMaster') {
          this.$store.dispatch('getBusinessDetailById', {_id: this.busId})
        }
      },
      busShowDetail (id) {
        this.busDetailShow = !this.busDetailShow
        if (this.busDetailShow) {
          this.$store.dispatch('getBusinessDetailById', {_id: id}).then(() => {
            this.busId = id
          })
        }
      },
      off () {
        this.comment = ''
        this.handInputValue = ''
        this.supplementalInputValue = ''
        this.checkBoxIsTrue = false
        this.isHandStatus = false
        this.$emit('off')
      },
      rejectFun () {
        this.$emit('rejectFun', this.currentItem.rejectId)
      },
      inputChangeFun (str) {
        this.inputFlag = true
        if (this.resultGrade + Number(str) > 100) {
          this.resultGrade = 100
        } else if (this.resultGrade + Number(str) < 0) {
          this.resultGrade = 0
        } else {
          this.resultGrade = this.resultGrade + Number(str)
        }
      },
      handiInputChangeFun (str) {
        this.inputFlag = true
        this.isHandStatus = false
        if (str > 100) {
          this.resultGrade = 100
        } else if (str < 0) {
          this.resultGrade = 0
        } else {
          this.resultGrade = Number(str)
        }
      },
      channelFun () {
        this.comment = ''
        this.handInputValue = ''
        this.supplementalInputValue = ''
        this.checkBoxIsTrue = false
        this.isHandStatus = false
        this.$emit('channelFun')
      },
      channelHit () {
        this.surePopover = true
        this.sureNoPopover = false
      },
      nextGrade () {
        this.$emit('nextGrade')
      },
      save (gradeObj) {
        gradeObj.COMMENT = this.COMMENT
        this.$emit('saveGrade', gradeObj)
      },
      closeWindow () {
        this.handInputValue = ''
        this.comment = ''
        this.busDetailShow = false
        this.supplementalInputValue = ''
        this.checkBoxIsTrue = false
        this.isHandStatus = false
        this.$emit('close')
      },
      saveBtn () {
        this.$refs.scoreTem.save()
      },
      sureGiveUpResult () {

      },
      ruleChecked () {
        this.supplementalInputValue = ''
        let arr = []
        console.log(this.currentItem,'this.currentItem')
        if(this.currentItem.dialogues){
          let currentItemDialogues = deepClone(this.currentItem.dialogues)
          currentItemDialogues.forEach(item=>{
            if(item.hitRecord.length>0){
              if(item.contentType=='text'){
                item.text = item.text
              }else if(item.contentType=='image'||item.contentType=='screenShare'||item.contentType=='richText'){
                item.text = this.$t('webchat.messageImg')
              }else if(item.contentType=='file'){
                item.text = this.$t('webchat.messageFile')
              }else if(item.contentType=='iframe'){
                item.text = this.$t('webchat.messageIframe')
              }else if(item.contentType=='video'){
                item.text = this.$t('webchat.messageWechatVoice')
              }else if(item.contentType=='voice'){
                item.text = this.$t('webchat.messageVoice')
              }else if(item.contentType=='wechatvideo'){
                item.text = this.$t('webchat.messageWechatVoice')
              }else if(item.contentType=='cardInfo'){
                item.text = this.$t('webchat.messageLeaveMsg')
              }else if(item.contentType=='link'){
                item.text = this.$t('webchat.messageWechatLink')
              }
              item.hitRecord.forEach(i=>{
                let obj = JSON.parse(JSON.stringify(i))
                if (item.text.indexOf('&lt;7moorbr/&gt;') > -1 || item.text.indexOf('<7moorbr/>') > -1) {
                  item.text = item.text.replace(/<7moorbr\/>/g, ' ')
                  item.text = item.text.replace(/&lt;7moorbr\/&gt;/g, ' ')
                }
                obj.text = item.text
                obj.contentType = item.contentType
                arr.push(obj)
              })
            }
          })
        }
        this.ruleResults=JSON.parse(JSON.stringify(this.currentItem.ruleResults))
        this.ruleResults.forEach(item=>{
          item.webChatRuleDetail = []
          arr.forEach(i=>{
          if(item.ruleId==i.ruleId){
            if(i.type=='keywordCheck'){
              i.type=this.$t('configLazyLoad.intelligentQualityCheck.keyWordsMatch')
            }else if(i.type=='interrupt'){
              i.type=this.$t('configLazyLoad.intelligentQualityCheck.serviceHijacking')
            }else if(i.type=='firstResponse'){
              i.type=this.$t('configLazyLoad.intelligentQualityCheck.firstResponse')
            }else if(i.type=='talkSpeed'){
              i.type=this.$t('configLazyLoad.intelligentQualityCheck.speedDetection')
            }else if(i.type=='regCheck'){
              i.type=this.$t('configLazyLoad.intelligentQualityCheck.regularMatch')
            }else if(i.type=='talkInterval'){
              i.type=this.$t('configLazyLoad.intelligentQualityCheck.conversationInterval')
            }else if(i.type=='regRepeat'){
              i.type=this.$t('configLazyLoad.intelligentQualityCheck.contextRepetition')
            }else if(i.type=='moodTest'){
              i.type=this.$t('configLazyLoad.intelligentQualityCheck.emotionDetection')
            }
            let obj = {}
            obj.text=i.text
            obj.type=i.type
            obj.contentType=i.contentType
            item.webChatRuleDetail.push(obj)
          }
          })
        })
        this.$set(this.ruleResults,'self_update',''); // 先使用强制更新一下
        delete this.ruleResults['self_update'];  // 然后把这个属性再删了
        this.currentItem.ruleResults.map(item => {
          if (!item.isCanceled || item.isCanceled === false) {
            this.resultGrade = this.currentItem.gradeAmount
//            this.$refs.multipleTable.toggleRowSelection(item, true)
          } else {
            this.resultGrade = this.currentItem.gradeAmount
          }
        })
      },
      textRed (val) {
        let paneWrap = document.getElementById('textColor')
        let spans = paneWrap.getElementsByTagName('span')
        for (let n=0;n < spans.length;n++) {
          paneWrap.getElementsByTagName('span')[n].style.color = '#000'
        }
        let paneWrapItem = paneWrap.getElementsByClassName(val)
        for (let i=0;i < paneWrapItem.length;i++) {
          paneWrap.getElementsByClassName(val)[i].style.color = 'red'
        }
      },
      handleSelectionChange (val) { // 多选点击事件
        this.supplementalInputValue = ''
        let nomalGrade = 0
        val.map(item => {
          nomalGrade += Number(item.scoreItem.split(',')[1])
        })
        if (Number(this.currentItem.nomalScore) + nomalGrade > 100) {
          this.resultGrade = 100
        } else if (Number(this.currentItem.nomalScore) + nomalGrade < 0) {
          this.resultGrade = 0
        } else {
          this.resultGrade = Number(this.currentItem.nomalScore) + nomalGrade
        }
        this.multipleSelection = val
      },
//      checkBoxFun () {
//        if (this.checkBoxIsTrue) {
//          this.supplementalInputValue = ''
//          this.isHandStatus = true
//        } else {
//          this.handInputValue = ''
//          this.resultGrade = this.currentItem.basicScore
//          this.isHandStatus = false
//        }
//      },
      checkResultFun () { // 确定
        let data = {
          result: this.currentItem._id,
          comment: this.comment
        }
        if (this.appealFlag) {
          data.appeal = this.currentItem.rejectId
        }
        data.gradeAmount = this.resultGrade
        data.currentRules = this.multipleSelection
        if (this.currentItem.type === 'manual') { // 手动评分
          data.manualScore = this.handInputValue
        } else if (this.currentItem.type === 'auto') { // 补充得分
          data.supplementScore = this.supplementalInputValue
        }
        if (this.handInputValue > 100 || this.handInputValue < 0 || this.supplementalInputValue > 100) {
          this.$message({
            type: 'error',
            message: this.$t('intelligentQualityCheck.intelTestNumOne')
          })
          return
        }
        this.$store.dispatch('queryIntelligentQualityCheckResultAllCheckResultWeb', data).then((res) => {
          if (res && res.success) {
            this.supplementalInputValue = ''
            this.handInputValue = ''
            this.comment = ''
            this.checkBoxIsTrue = false
            this.isHandStatus = false
            this.$emit('checkResultFun', res)
          }
        })
      },
//      按规则标红关键字
      markRed (val, index) {
        this.rulesIndex = index
        this.$refs.webChatView.markRed(val)
      }
    },
    beforeMount () {
      this.$nextTick(function () {
        if (this.currentItem.type === 'auto') {
          this.ruleChecked()
        } else {
          this.resultGrade = this.currentItem.gradeAmount
          let data = {
            page: 1,
            pageSize: 200
          }
          this.$store.dispatch('getMarkRuleListConfig', data).then(res => {
            if (res.success) {
              res.data = res.data.filter((item) => {
                return item.type === 'webchat' && item.isEnable
              })
              this.ruleRender = deepClone(res.data)
            }
          })
        }
      })
    },
    mounted () {
      this.currentItem = this.currentItemSny
      this.rulesIndex = 0
//      bus.$on('webchatScoreFetch', () => {
//        this.fetchData()
//      })
      bus.$on('intelQualityEnterWebDeltails', (val) => {
//        this.currentItem = val
//        console.log(val)
//        this.$nextTick(function () {
//          if (this.currentItem.type === 'auto') {
//            this.ruleChecked()
//          } else {
//            this.resultGrade = this.currentItem.gradeAmount
//            let data = {
//              page: 1,
//              pageSize: 200
//            }
//            this.$store.dispatch('getMarkRuleListConfig', data).then(res => {
//              if (res.success) {
//                res.data = res.data.filter((item) => {
//                  return item.type === 'webchat' && item.isEnable
//                })
//                this.ruleRender = deepClone(res.data)
//              }
//            })
//          }
//        })
      })
    },
    beforeDestroy () {
      bus.$off('webchatScoreFetch')
      bus.$off('intelQualityEnterWebDeltails')
    }
  }
</script>
<style lang="stylus" scoped>
  .layout-qua
    transition transform 0.35s
    box-shadow 0 3px 6px rgba(0, 0, 0, .3)
    animation movelayout-qua .4s
    @keyframes movelayout-qua
      0%
        width 0px
      100%
        width calc(84vw)
  .layin-qua
    width:0px
    transition transform 0.35s
  .webchat-grade.layin-qua .web-grade-right
    width 0px
  .webchat-grade.layout-qua .web-grade-right
    width 396px
  .webchat-grade.layin-qua .web-grade-left
    width 0px
  .webchat-grade.layout-qua .web-grade-left
    width calc(84vw - 396px)
  .webchat-grade
    position fixed
    right 0
    top 95px
    height calc(100% - 95px)
    z-index 6
    background-color #fff
    .web-grade-left
      float left
      position relative
      z-index 100
    /*width calc(100% - 396px)*/
    .web-grade-right
      float right
      position relative
      z-index 100
      /*width 396px*/
      background-color #f2f2f2
    .web-grade-left h2,.web-grade-right h2
      padding 14px 20px
      font-size 16px
      font-weight bold
      border-bottom 1px solid #ccc
    .web-grade-right h2
      border-left 1px solid #ccc
    .web-grade-left .web-grade-left-con,.web-grade-right .web-grade-right-con
      height calc(100vh - 185px)
      overflow-y auto
      overflow-x hidden
      padding 20px
    .web-grade-right .web-grade-right-con
      border-left 1px solid #ccc
    .mask-qua
      position fixed
      right 0
      left 0
      top 0
      bottom 0
      z-index 2
      background-color #fff
      /*filter Alpha(Opacity=60)*/
      opacity 0
  .close
    position absolute
    right 28px
    top 14px
    z-index 100
    font-size 16px
    /*background-color #f2f2f2*/
    cursor pointer
</style>
<style lang="stylus" scoped>
  @import '../../../../assets/common.styl'
  .business
    border 1px solid #ddd
    background-color #f9f9f9
    padding 5px
    .data
      line-height 34px
      font-size 14px
      border-bottom 1px dotted #ddd
      height 34px
    .bus-info
      padding-top 4px
    .pad-right
      padding-right 6px
    .pad-left
      padding-left 6px
    .clearfix:after
      display block
    .sq-wrap
      margin-bottom 16px
    .pad
      padding 8px 15px 0 0
  .call-detail table
    bors(1px,#ddd)
    width 100%
    border-collapse collapse
    tr
      height 40px
      border-bottom 1px solid #e7e7eb
      td:nth-of-type(even)
        padding 10px
        color $cf-gray3
      td:nth-of-type(odd)
        padding 10px
        color $cf-gray0
    &:nth-of-type(even)
      color $cf-gray0
    tr:nth-of-type(even) td
      background #f4f5f9
    tr:hover td
      background $c-back
  .call-detail table tr:nth-last-child(1)
    border-bottom none
  .right-input
    width:140px
  .channelHit
    margin 20px 0px
  .channelHit ul li
    font-size 12px
  .right-text
    margin 10px 0px
    width: 340px
    height: 50px
  .supplemental
    border-bottom 1px solid #ccc
  .right-content
    color: $cf-gray6
  .checkBox
    margin 10px 5px 5px 0px
  .hand
    margin-top 20px
  .wrap_grade
    height 14px
    line-height 14px
    margin-bottom 10px
  .grade_ipt
    line-height 30px
  .assist
    float right
    color: $c-main
    cursor pointer
  .el-row
    margin-bottom 10px
    .grade_are
      line-height 50px
    .grade_ipt
      line-height 30px
  .wrap_grade
    height 14px
    line-height 14px
    margin-bottom 10px
    .qc_score
      margin-right 10px
    .assist
      float right
      color: $c-main
      cursor pointer
  .div-color
    color $cf-level1
  .span-color
    color: $c-main;
    cursor: pointer
  .rules-wrap
    padding 10px
    span
      display inline-block
      margin 0 14px 10px 0
      padding 4px 8px
      border 1px solid #ccc
      border-radius 8px
      color $c-main
      cursor pointer
    .active
      background-color $c-main
      color #fff
 /deep/ .el-table 
    .cell
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
    .row-expand-cover 
      .cell 
        .el-table__expand-icon 
	        display: none;
    .table-tooltip
      max-width 200px
</style>

